<template>
  <div id="ElementTiptap" class="ElementTiptap home">
    <div>
      <el-tiptap
        style="padding: 0px;"
        v-model="content"
        :extensions="extensions"
        lang="zh"
        placeholder="请输入内容"
        @change="tiptapChange"
      />
    </div>

  </div>
</template>

<script>
// 引入 import element-tiptap 样式
import 'element-tiptap/lib/index.css'
import { ossUpload } from '@/api/oss/oss'
import {
  ElementTiptap,
  // 需要的 extensions
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  Link,
  Image,
  CodeBlock,
  Blockquote,
  TodoItem,
  TodoList,
  TextAlign,
  FontSize,
  FontType,
  Fullscreen,
  TextHighlight,
  TextColor,
  FormatClear,
  Table,
  TableHeader,
  TableCell,
  TableRow,
  History,
  TrailingNode,
  HardBreak,
  HorizontalRule,
  LineHeight,
  Preview,
  Indent
} from 'element-tiptap'

export default {
  name: 'ElementTiptap',
  props: {
    contentMsg: {
      type: String
    },
  },
  data() {
    return {
      // 
      content: '',
      extensions: [
        // new Doc(), // 必须项
        // new Text(), // 必须项
        // new Paragraph(), // 必须项
        // new Heading({ level: 6 }), // 标题
        // new Bold({ bubble: true }), // 加粗 bubble: true 在气泡菜单中渲染菜单按钮
        // new Underline({ bubble: true, menubar: false }), // 下划线 bubble: true, menubar: false 在气泡菜单而不在菜单栏中渲染菜单按钮
        // new Italic({ bubble: true }), // 斜体
        // new Strike({ bubble: true }), // 删除线
        // new ListItem(), // 使用列表必须项
        // new BulletList({ bubble: true }), // 无序列表
        // new OrderedList({ bubble: true }), // 有序列表
        // new Link(), // 链接
        // // new Image(), // 图片
        new Image({
          // 自定义图片上传(默认会把图片生成base64字符串和内容存储到一起)
          // 返回一个 Promise<url>
          // 自定义图片上传方式
          uploadRequest(file) {
            const formData = new FormData()
            formData.append('file', file)
            return ossUpload(formData).then(response => {
              return response.data.url
            })
          }
        }), 

        // new CodeBlock({ bubble: true }), // 代码块
        // new Blockquote(), // 引用
        // new TodoItem(), // 任务列表必须项
        // new TodoList(), // 任务列表
        new TextAlign({ bubble: true }), // 文本对齐方式
        // new FontSize({ bubble: true }), // 字号
        // new FontType({ bubble: true }), // 字体
        // new Fullscreen(), // 全屏
        // new TextHighlight({ bubble: true }), // 文本高亮
        // new TextColor({ bubble: true }), // 文本颜色
        // new FormatClear({ bubble: true }), // 清除格式
        // new Table({ resizable: true }), // 表格
        // new TableHeader(), // 表格必须项
        // new TableCell(), // 表格必须项
        // new TableRow(), // 表格必须项
        // new History(), // 撤销
        // // new TrailingNode(), // 重做
        // new HardBreak(), // 分割线
        // new HorizontalRule(), // 行距
        // new LineHeight(), // 增加缩进
        // new Indent() // 减少缩进


        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 3 }),
        new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
        new Underline(), // 下划线
        new Italic(), // 斜体
        new Strike(), // 删除线
        new HorizontalRule(), // 华丽的分割线
        new ListItem(),
        new BulletList(), // 无序列表
        new OrderedList(), // 有序列表
        new TodoItem(),
        new TodoList(),
        new Fullscreen(),
        new Preview(),
        new CodeBlock(),
        new TextColor()
      ]
    }
  },
  created() {
  },
  methods: {
    tiptapChange(data) {
      console.log(data, 'data')
    }
  },
  watch: {
    content() {
      this.$emit('upcontent', this.content)
    }
  }
}
</script>

<style lang="scss">
#ElementTiptap .app-container{
  padding: 0;
}
#ElementTiptap .el-tiptap-editor>.el-tiptap-editor__content{
  padding: 20px 10px;
}
#ElementTiptap .el-tiptap-editor .ProseMirror{
  min-height: 300px;
}
</style>
